﻿<style>
    .padding5 {
        padding-left: 5px;
        padding-right: 5px;
    }
    /*viewer.css*/
    .viewer-zoom-in:before, .viewer-zoom-out:before, .viewer-one-to-one:before, .viewer-reset:before, .viewer-prev:before, .viewer-play:before, .viewer-next:before, .viewer-rotate-left:before, .viewer-rotate-right:before, .viewer-flip-horizontal:before, .viewer-flip-vertical:before, .viewer-fullscreen:before, .viewer-fullscreen-exit:before, .viewer-close:before {
        display: block;
        width: 20px;
        height: 20px;
        font-size: 0;
        line-height: 0;
        color: transparent;
        background-image: url("");
        background-repeat: no-repeat;
    }

    .viewer-zoom-in:before {
        content: "Zoom In";
        background-position: 0 0;
    }

    .viewer-zoom-out:before {
        content: "Zoom Out";
        background-position: -20px 0;
    }

    .viewer-one-to-one:before {
        content: "One to One";
        background-position: -40px 0;
    }

    .viewer-reset:before {
        content: "Reset";
        background-position: -60px 0;
    }

    .viewer-prev:before {
        content: "Previous";
        background-position: -80px 0;
    }

    .viewer-play:before {
        content: "Play";
        background-position: -100px 0;
    }

    .viewer-next:before {
        content: "Next";
        background-position: -120px 0;
    }

    .viewer-rotate-left:before {
        content: "Rotate Left";
        background-position: -140px 0;
    }

    .viewer-rotate-right:before {
        content: "Rotate Right";
        background-position: -160px 0;
    }

    .viewer-flip-horizontal:before {
        content: "Flip Horizontal";
        background-position: -180px 0;
    }

    .viewer-flip-vertical:before {
        content: "Flip Vertical";
        background-position: -200px 0;
    }

    .viewer-fullscreen:before {
        content: "Enter Full Screen";
        background-position: -220px 0;
    }

    .viewer-fullscreen-exit:before {
        content: "Exit Full Screen";
        background-position: -240px 0;
    }

    .viewer-close:before {
        content: "Close";
        background-position: -260px 0;
    }

    .viewer-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        -ms-touch-action: none;
        touch-action: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #000;
        background-color: rgba(0, 0, 0, .5);
        direction: ltr !important;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

        .viewer-container::-moz-selection, .viewer-container *::-moz-selection {
            background-color: transparent;
        }

        .viewer-container::selection, .viewer-container *::selection {
            background-color: transparent;
        }

        .viewer-container img {
            display: block;
            width: 100%;
            min-width: 0 !important;
            max-width: none !important;
            height: 100%;
            min-height: 0 !important;
            max-height: none !important;
        }

    .viewer-canvas {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }

    .viewer-footer {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        text-align: center;
    }

    .viewer-navbar {
        overflow: hidden;
        background-color: #000;
        background-color: rgba(0, 0, 0, .5);
    }

    .viewer-list {
        height: 50px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        padding: 1px 0;
        margin: 0;
        overflow: hidden;
    }

        .viewer-list > li {
            float: left;
            width: 30px;
            height: 50px;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            color: transparent;
            cursor: pointer;
            filter: alpha(opacity=50);
            opacity: .5;
        }

            .viewer-list > li + li {
                margin-left: 1px;
            }

        .viewer-list > .viewer-active {
            filter: alpha(opacity=100);
            opacity: 1;
        }

    .viewer-player {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        cursor: none;
        background-color: #000;
    }

        .viewer-player > img {
            position: absolute;
            top: 0;
            left: 0;
        }

    .viewer-toolbar {
        width: 280px;
        padding: 3px 0;
        margin: 0 auto 5px;
        overflow: hidden;
    }

        .viewer-toolbar > li {
            float: left;
            width: 24px;
            height: 24px;
            overflow: hidden;
            cursor: pointer;
            background-color: #000;
            background-color: rgba(0, 0, 0, .5);
            border-radius: 50%;
        }

            .viewer-toolbar > li:hover {
                background-color: #000;
                background-color: rgba(0, 0, 0, .8);
            }

            .viewer-toolbar > li:before {
                margin: 2px;
            }

            .viewer-toolbar > li + li {
                margin-left: 1px;
            }

        .viewer-toolbar > .viewer-play {
            width: 30px;
            height: 30px;
            margin-top: -3px;
            margin-bottom: -3px;
        }

            .viewer-toolbar > .viewer-play:before {
                margin: 5px;
            }

    .viewer-tooltip {
        position: absolute;
        top: 50%;
        left: 50%;
        display: none;
        width: 50px;
        height: 20px;
        margin-top: -10px;
        margin-left: -25px;
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background-color: #000;
        background-color: rgba(0, 0, 0, .8);
        border-radius: 10px;
    }

    .viewer-title {
        display: inline-block;
        max-width: 90%;
        margin: 0 5% 5px;
        overflow: hidden;
        font-size: 12px;
        line-height: 1;
        color: #ccc;
        text-overflow: ellipsis;
        white-space: nowrap;
        filter: alpha(opacity=80);
        opacity: .8;
    }

        .viewer-title:hover {
            filter: alpha(opacity=100);
            opacity: 1;
        }

    .viewer-button {
        position: absolute;
        top: -40px;
        right: -40px;
        width: 80px;
        height: 80px;
        overflow: hidden;
        cursor: pointer;
        background-color: #000;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 50%;
    }

        .viewer-button:before {
            position: absolute;
            bottom: 15px;
            left: 15px;
        }

    .viewer-fixed {
        position: fixed;
    }

    .viewer-open {
        overflow: hidden;
    }

    .viewer-show {
        display: block;
    }

    .viewer-hide {
        display: none;
    }

    .viewer-invisible {
        visibility: hidden;
    }

    .viewer-toggle {
        cursor: pointer;
        cursor: -webkit-zoom-in;
        cursor: zoom-in;
    }

    .viewer-move {
        cursor: move;
        cursor: -webkit-grab;
        cursor: -moz-grab;
        cursor: grab;
    }

    .viewer-fade {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    .viewer-in {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .viewer-transition {
        -webkit-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }

    .mb4_pics {
        padding-left: 5px;
        padding-right: 5px;
    }

        .mb4_pics ul {
            padding-left: 0;
            list-style: none;
        }

        .mb4_pics li {
            margin-top: 10px;
        }

            .mb4_pics li img {
                padding: 1px;
                background: #fff;
                max-width: 100%;
                box-shadow: 0 0 5px rgba(0,0,0,0.45);
            }
</style>
<div class="page" id="page-index" ng-app="app" ng-controller="APPCtrl">
    <div class="content">
        <div class="content-inner">
            <div class="mb4_pics">
                <div class="docs-galley">
                    <ul class="docs-pictures com" id="topnav">
                        <li class="col-xs-6 padding5" ng-repeat="item in coms.topnav.list"><img data-original="{{item.wxico}}" src="{{item.wxico}}" /></li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/design/mobile/tlp/4/viewer.js"></script>
<script>
    angular.module("app", []).controller("APPCtrl", function ($scope) {
        Zepto.init();
        Zepto.showIndicator();
        tools.site = "{$site}";
        tools.extend($scope);
        $scope.coms = [];
        //---------------------------------------------------------------------------//
        $scope.coms["topnav"] = { type: "nav", list: [] };
        $scope.coms["conbody"] = { type: "list", list: [] };
        $scope.coms["footbar"] = { type: "footbar", list: [] };
        //---------------------------------------------------------------------------//
        tools.getdata({ nodename: escape("微站图片") }, function (result) {
            $scope.coms["topnav"].list = result;
            $scope.$digest();
            setTimeout(function () {
                var console = window.console || { log: function () { } };
                var $images = $('.docs-pictures');
                var $toggles = $('.docs-toggles');
                var $buttons = $('.docs-buttons');
                var handler = function (e) {
                    console.log(e.type);
                };
                var options = {
                    // inline: true,
                    url: 'data-original',
                    build: handler,
                    built: handler,
                    show: handler,
                    shown: handler,
                    hide: handler,
                    hidden: handler
                };

                function toggleButtons(mode) {
                    if (/modal|inline|none/.test(mode)) {
                        $buttons.
                          find('button[data-enable]').
                          prop('disabled', true).
                            filter('[data-enable*="' + mode + '"]').
                            prop('disabled', false);
                    }
                }

                $images.on({
                    'build.viewer': handler,
                    'built.viewer': handler,
                    'show.viewer': handler,
                    'shown.viewer': handler,
                    'hide.viewer': handler,
                    'hidden.viewer': handler
                }).viewer(options);

                toggleButtons(options.inline ? 'inline' : 'modal');

                $toggles.on('change', 'input', function () {
                    var $input = $(this);
                    var name = $input.attr('name');

                    options[name] = name === 'inline' ? $input.data('value') : $input.prop('checked');
                    $images.viewer('destroy').viewer(options);
                    toggleButtons(name);
                });

                $buttons.on('click', 'button', function () {
                    var data = $(this).data();
                    var args = data.arguments || [];

                    if (data.method) {
                        if (data.target) {
                            $images.viewer(data.method, $(data.target).val());
                        } else {
                            $images.viewer(data.method, args[0], args[1]);
                        }

                        switch (data.method) {
                            case 'scaleX':
                            case 'scaleY':
                                args[0] = -args[0];
                                break;

                            case 'destroy':
                                toggleButtons('none');
                                break;
                        }
                    }
                });
            }, 500);
            Zepto.hideIndicator();
            tools.init();
        })
    });
</script>